const primary = document.querySelector('#primary');
const secondary = document.querySelector('#secondary');
const degrees = document.querySelector('#degrees');


primary.addEventListener('input', function(){
  document.documentElement.style.setProperty(`--${this.name}`, this.value);
  document.querySelector('.color1').textContent = this.value;
});

secondary.addEventListener('input', function(){
  document.documentElement.style.setProperty(`--${this.name}`, this.value);
  document.querySelector('.color2').textContent = this.value;
});

degrees.addEventListener('input', function(){
  document.documentElement.style.setProperty(`--${this.name}`, this.value + 'deg');
  document.querySelector('.slider').textContent = this.value;
});